﻿<template>
    <l-layout class="l-tab-page" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input placeholder="请输入标题" @keyup.enter.native="handleSearch"  v-model="keyWord" size="mini" >
                        <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="600"
                  :width="1024"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" ></my-form>
        </l-dialog>
        
    </l-layout>
</template>

<script>
import MyForm from './form'
const api = window.$api.oa.news
export default {
    components: {
        MyForm,
    },
    data() {
        return {
            lr_isPage:true,
            // 查询参数
            keyWord:'',
            // 表格参数
            tableLoading: false,
            tableData:[],
            tableTotal:0,
            tableCurrentPage:1,
            tablePageSize:50,
            columns: [
                {label:'新闻标题',prop:'f_FullHead',minWidth:120,align:'left'},
                {label:'作者',prop:'f_AuthorName',width:100,align:'left'},
                {label:'编辑',prop:'f_CompileName',width:100,align:'left'},
                {label:'新闻栏目',prop:'f_CategoryId',width:100,align:'left',dataType:'mydata',options:[
                    {"value":"1","label":"国内新闻"},
                    {"value":"2","label":"国际新闻"},
                    {"value":"3","label":"社会新闻"},
                    {"label":"体育新闻","value":'4'},
                    {"label":"娱乐新闻","value":'5'},
                    {"label":"科技新闻","value":'6'},
                    {"label":"行业趣闻","value":'7'},
                    {"label":"其他新闻","value":'8'}]},
                {label:'发布时间',prop:'f_ReleaseTime',width:160,align:'left',dataType:'datetime'},
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'},
            ],

            // 表单参数
            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false,
        };
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()
        },
        
        handleSearch(){
            this.loadTableData()
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            const queryData = {}
            
            queryData.keyword = this.keyWord
            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_ModifyDate DESC,F_CreateDate DESC'

            let data = await this.$awaitWraper(api.getPage(queryData))
            if(data != null){
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else{
                this.tableData = []
            }
            this.tableLoading = false
        },

        handleAdd(){
            this.formEdit = false
            this.handleShowForm('新增新闻')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.handleShowForm('编辑新闻')
        },
        handleDelete($index,row){
            this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
            }).then(async () => {
                this.tableData.splice($index,1);
                this.tableTotal--;
                await api.remove(row.f_NewsId)
                this.$message({
                    type: 'success',
                    message: this.$t('删除成功!')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除!')
                })
            })
        },

        async handleSave(showLoading, hideLoading) {
            if (await this.$refs.form.validateForm()) {
                showLoading()
                const postData = this.$refs.form.getForm()
                let res = ''
                if(this.formEdit){// 编辑
                    res = await this.$awaitWraper(api.update(this.formEditRow.f_NewsId,postData))
                }
                else{// 新增
                    res = await this.$awaitWraper(api.add(postData))
                }
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('保存成功!')
                    })
                    this.loadTableData()
                    this.formVisible = false
                }

                hideLoading()
            }
        },

        handleShowForm(text) {
            this.formTitle = text;
            this.formVisible = true;
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('加载数据中...')
                let data = await this.$awaitWraper(api.get(this.formEditRow.f_NewsId))
                if(data){
                    this.$refs.form.setForm(data)
                }

                hideLoading()
            }
        },
        handleCloseForm() {
            this.$refs.form.resetForm();
        }
    }
}
</script>
